<template>
  <div class="home">
    <gltitle :is_mt="true" :is_notice="false" :is_back="true" :is_name="true" :title="title"></gltitle>
    <div class="container">
      <div class="sn-box">
        <div class="sn-title">{{ $t('page3.doc13') }}</div>
        <div class="sn">
          <span>{{ info.sn }}</span>
          <img
              v-clipboard:success="onCopy"
              v-clipboard:copy="info.sn"
              src="@/assets/images/public/icon-copy.png" alt="">

        </div>
      </div>
      <div class="item">
        <div class="cname">{{ $t('page3.doc14') }}</div>
        <div class="box">
          <div class="he wrap bet">
            <div class="n">{{ $t('new.doc30') }}</div>
            <div class="s">
              <span v-if="info.status==10">{{ $t('new.doc23') }}</span>
              <span v-else>{{ $t('page3.doc16') }}</span>
            </div>
          </div>
          <div class="info-list">
            <div class="info">
              <div class="name">{{ $t('new.doc31') }}</div>
              <div class="value">{{  common.decal2(info.orderAmount) }} USDT</div>
            </div>
            <div class="info">
              <div class="name">{{ $t('new.doc32') }}</div>
              <div class="value">{{ common.accMul(info.rate, 100) }}%</div>
            </div>
            <div class="info">
              <div class="name">{{ $t('new.doc33') }}</div>
              <div class="value">{{ info.startDate }}</div>
            </div>
            <!--            <p class="x"></p>-->

            <div class="info">
              <div class="name">{{ $t('new.doc34') }}</div>
              <div class="value">{{ info.endDate }}</div>
            </div>
            <div class="info">
              <div class="name">{{ $t('new.doc35') }}</div>
              <div class="value">{{ $t('page3.doc22', {i1: info.days}) }}</div>
            </div>
            <!--            <div class="info" v-show="info.status==10">-->
            <!--              <div class="name">{{ $t('page3.doc23') }}</div>-->
            <!--              <div class="value red">{{ info.endDate }}</div>-->
            <!--            </div>-->
          </div>
        </div>
      </div>

      <!--收益详情-->
      <!--      <div class="item">
              <div class="cname">{{ $t('page3.doc24') }}</div>
              <div class="box">
                <div class="info-list">
                  <div class="info">
                    <div class="name">{{ $t('page3.doc25') }}</div>
                    <div class="value">{{ info.dailyIncome || 0 }} USDT</div>
                  </div>
                  <div class="info">
                    <div class="name">{{ $t('page3.doc26') }}</div>
                    <div class="value">{{ info.totalIncome || 0 }} USDT</div>
                  </div>
                </div>
              </div>
            </div>-->
      <div class="tip-box" v-if="tipsInfo.description">
        <div class="p_name">{{ tipsInfo.title }}:</div>
        <div class="p" v-html="tipsInfo.description"></div>
      </div>
    </div>
    <PayPasswordPop v-model="showPayPop"
                    @submit="submitRedeem"/>

    <div class="footer" v-if="info.hasCanRedeem||info.hasCanRepeatBuy">

      <div class="btn time-btn" v-if="info.hasCanRepeatBuy" @click="repurchase"
           :class="{min: info.repeatBuyCountdown==-1}"
      >
        <div> {{ $t('new.doc36') }}</div>
        <van-count-down v-if="info.repeatBuyCountdown!=-1" :time="info.repeatBuyCountdown*1000"
                        @finish="info.hasCanRepeatBuy=false">
          <template #default="timeData">
            <span class="block">{{ timeData.days * 24 + timeData.hours }}</span>
            <span class="colon">{{ $t('page4.doc140') }} </span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">{{ $t('page4.doc141') }} </span>
            <span class="block">{{ timeData.seconds }}</span>
            <span class="colon">{{ $t('page4.doc142') }}</span>
          </template>
        </van-count-down>
      </div>
      <div class="btn" v-if="info.hasCanRedeem" @click="showPayPop=true">{{ $t('new.doc37') }}</div>
    </div>
  </div>
</template>
<script>
import PayPasswordPop from "@/components/public/PayPasswordPop.vue";

export default {
  components: {PayPasswordPop},
  data() {
    return {
      title: this.$t('page3.doc9'),
      info: {},
      showPayPop: false,
      tipsInfo: {}
    };
  },

  async mounted() {
    if (sessionStorage.getItem('repeatBuy')) {
      sessionStorage.removeItem('repeatBuy')
      return this.$router.go(-1);
    }
    await this.getDetail();
    let {productCanRepeatBuy} = this.info
    if(!productCanRepeatBuy)return
    this.getTipsInfo();

  },


  methods: {
    async getDetail() {
      const url = this.URL.financial.detail
      const params = {orderId: this.$route.query.orderId}
      let res = await this.$post(url, params)
      if (res.code != 0) return this.$toast(res.message);
      this.info = res.data

    },
    async getTipsInfo() {
      const url = this.URL.home.article
      const params = {categoryType: 'INVESTMENT_TIPS'}
      const res = await this.$post(url, params)
      if (res.code != 0) return;
      this.tipsInfo = res.data
    },
    async submitRedeem(password) {
      const url = this.URL.financial.redeem
      const params = {
        orderId: this.info.orderId,
        password: this.$md5(password)
      }
      let res = await this.$post(url, params)
      if (res.code != 0) return this.$toast(res.message);
      // this.info = res.data
      this.showPayPop = false;
      this.$router.go(-1)
    },
    /**
     * 复投
     */
    repurchase() {
      let {productId, orderAmount, orderId, totalIncome} = this.info
      orderAmount = this.common.accAdd(orderAmount, totalIncome)
      const query = {id: productId, type: 'repurchase', orderAmount, orderId};
      this.$router.push({path: '/invest/view', query});
    },
    onCopy(e) {
      this.$toast(this.$t('page.doc31'))
    },
    path_url(url) {
      this.$router.push({
        path: url,
        query: {}
      });
    },
  },
};
</script>


<style lang="less" scoped>
/deep/ .head {
  background: #121622 !important;
}

.container {
  padding-bottom: 1.4rem;
}

.cname {
  font-size: .32rem;
  color: #FFFFFF;
  font-weight: 500;
  margin-bottom: .24rem;
  line-height: .5rem;
}

.sn-box {
  border-radius: .24rem;
  background: #1a202e;
  padding: .32rem;

  .sn-title {
    color: #FFF;
    font-size: .28rem;
  }

  .sn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .1rem;

    span {
      color: #BDBDBD;
      font-size: .26rem;
    }

    img {
      width: .28rem;
      height: .28rem;
    }
  }
}

.item {
  margin-top: .32rem;

  .box {
    background: #1a202e;
    //box-shadow: 0px .1rem .2rem rgba(0, 0, 0, 0.06);
    border-radius: .16rem;
    padding: 0 .24rem;

    .he {
      height: .87rem;
      border-bottom: .02rem solid #282E3C;

      align-items: center;

      .s {
        font-size: .22rem;
        color: #848C9A;

        span {
          font-size: .28rem;
          color: #096DFD;

        }
      }
    }

    ul {
      padding: .24rem 0;

      li {
        padding: .1rem 0;

        .n {
          color: #848C9A;
        }

        .s2 {
          color: #5BCB9A;
        }
      }
    }

    .info-list {
      padding-bottom: .32rem;
      font-size: .22rem;
      color: #BDBDBD;

      .info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: .32rem;

        .name {
          color: #BDBDBD;
          font-size: .26rem;
        }

        .value {
          color: #FFF;
          font-size: .26rem;

          &.red {
            color: #F04545;
          }
        }
      }

      p {
        margin-bottom: .16rem;
      }


      .x {
        height: .1rem;
      }
    }
  }
}

.footer {
  width: 100%;
  max-width: 8.5rem;
  height: fit-content;
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  background: #121622;
  padding: .32rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: .24rem;

  .btn {
    flex: 1;
    min-height: .88rem;
    //box-sizing: content-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .12rem .24rem;
    line-height: 1.2;
    border-radius: .48rem;
    border: .02rem solid #7B03FE;
    background: linear-gradient(90deg, rgba(123, 2, 254, 0.20) 0%, rgba(5, 112, 253, 0.20) 100%);

    &:first-child {
      flex: 2;
      border-radius: 48rem;
      border: none;
      background: linear-gradient(90deg, #7B02FE 0%, #0570FD 100%);
    }

    &.min {
      flex: 1;
    }

    &.time-btn {
      flex-direction: column;

      /deep/ .van-count-down {
        color: red;
        font-size: .28rem;
        margin-left: .1rem;
        line-height: 1.2;
      }
    }
  }
}

.tip-box {
  margin-top: .32rem;
  padding-bottom: .4rem;

  .p_name {
    font-size: .24rem;
    font-family: PingFangTC-Regular, PingFangTC;
    font-weight: 400;
    color: var(--COcolor1);
    margin-bottom: .16rem;
  }


  .p {
    font-size: .24rem;
    color: var(--COcolor1);
    line-height: .32rem;
  }
}
</style>